<template>
  <div id="component-aside">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider
        v-model="collapsed"
        :trigger="null"
        collapsible
        style="background: #fff"
      >
        <router-link to="/home">
          <div class="logo">
            <span>{{ title || "WeParty" }}</span>
          </div>
        </router-link>

        <!-- Menu -->
        <a-menu mode="inline" :default-selected-keys="[0]">
          <a-menu-item v-for="(item, index) in menuItems" :key="index">
            <router-link :to="item.link">
              <a-icon :type="item.iconType" :theme="item.iconTheme" />
              <span>{{ item.name }}</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <!-- COLLAPSE -->
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />

          <!-- BACK -->
          <a-icon class="trigger" type="left" @click="back" />

          <!-- HOME -->
          <a-icon class="trigger" type="home" @click="jumpToHome" />

          <!-- FORWARD -->
          <a-icon class="trigger" type="right" @click="forward" />

          <!-- SEARCH -->
          <a-input-search
            placeholder="Search Activity"
            style="width: 200px"
            @search="onSearch"
          />
          <!-- MY -->
          <a-dropdown class="my">
            <a-menu slot="overlay">
              <a-menu-item key="1">
                <router-link :to="linkMy">
                  <a-icon type="user" />个人中心
                </router-link>
              </a-menu-item>
              <a-menu-item key="2">
                <router-link :to="linkMessage">
                  <a-icon type="notification" />消息中心
                </router-link>
              </a-menu-item>
              <a-menu-item key="3">
                <router-link to="/set">
                  <a-icon type="setting" />设置面板
                </router-link>
              </a-menu-item>
              <a-menu-item v-if="isAdminister" key="4">
                <router-link to="/admin">
                  <a-icon type="smile" />管理中心
                </router-link>
              </a-menu-item>
            </a-menu>
            <a-avatar :size="32" icon="user" />
          </a-dropdown>
        </a-layout-header>

        <!-- Main Content -->
        <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: contentBackground || '#fff',
            minHeight: '280px',
          }"
        >
          <slot>
            <div class="default-empty-container">
              <a-empty style="" />
            </div>
          </slot>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
const PERMISSION_ADMIN = 1;

export default {
  name: "Aside",
  /**
   * menuItems: [
   *   {
   *     iconType: String,
   *     iconTheme: String,
   *     name: String,
   *     link: String
   *   }
   * ]
   * title: Title at top-left
   * contentBackground: the background of right-down part
   */
  props: {
    menuItems: Array,
    title: String,
    contentBackground: String,
  },
  data() {
    return {
      collapsed: false,
      linkMy: sessionStorage.getItem("id") ? "/my" : "/login",
      linkMessage: sessionStorage.getItem("id") ? "/message" : "/login",
      isAdminister: sessionStorage.getItem("permission")
        ? PERMISSION_ADMIN in JSON.parse(sessionStorage.getItem("permission"))
        : false,
    };
  },
  methods: {
    onSearch(value) {
      // Validate value
      if (
        value == null ||
        value.length == 0 ||
        value.replace(/(^s*)|(s*$)/g, "").length == 0
      ) {
        this.$message.warning("搜索内容不能为空且不能包含空格哦");
        return;
      }
      // Jump To Search
      this.jumpToSearch(value);
    },
    jumpToSearch(searchContent) {
      this.$router.push({
        path: `/search/${searchContent || ""}`,
      });
    },
    /**
     * Back to previous page
     */
    back() {
      this.$router.back();
    },
    /**
     * Go forward to next page
     */
    forward() {
      this.$router.forward();
    },
    /**
     * Jump to home page
     */
    jumpToHome() {
      this.$router.push({
        path: "/home",
      });
    },
  },
};
</script>

<style lang="less" scope>
.center() {
  align-items: center;
  justify-content: center;
}

#component-aside {
  height: 100%;
  width: 100%;
}

#components-layout-demo-custom-trigger {
  height: 100%;
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    &:hover {
      color: #1890ff;
    }
  }
  .my {
    float: right;
    margin: 16px 48px 16px 0;
  }
  .logo {
    display: flex;
    .center();
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
    span {
      font-size: 16px;
    }
  }
}
.default-empty-container {
  width: 100%;
  height: 100%;
  display: flex;
  .center();
}
</style>